import {useLocation, useNavigate} from "react-router-dom";
import React, {useState} from "react";

import SelectAuthor from "../../../../components/content/selectAuthor";
import ContentForm from "../../../../components/content/contentForm";
import SelectLabel from "../../../../components/content/selectLabel";
import SetVideo from "../../../../components/content/setVideo";
import store from "../../../../store";
import {observer} from "mobx-react";

const EditContent = () => {
    const navigate=useNavigate()
    // 获取跳转页面传过来的参数
    const {state: {row}} = useLocation()

    console.log(row)
    for (let key in row){
        if (row[key]===null)row[key]=''
    }
    // 选择标签
    const [labels, setLabels] = useState(row.label?row.label.split(','):[])
    // 选择作者
    const [author, setAuthor] = useState(row.writer)
    // 选择作者弹框是否显示
    const [isAuthorModalOpen, setIsAuthorModalOpen] = useState(false);
    // 选择标签弹框是否显示
    const [isLabelModalOpen, setIsLabelModalOpen] = useState(false);
    // 编辑视频弹框是否显示
    const [isSetVideoModalOpen, setIsSetVideoModalOpen] = useState(false);
    //表单提交触发的函数
    const submit=(values,file)=>{
        values.album=row.album
        values.id=row.id
        console.log('提交',values)
        store.content.uploadCover(file,values)
        navigate(-1)
    }

    return (
        <>
            <ContentForm
                row={row}
                labels={labels}
                setLabels={setLabels}
                author={author}
                setIsAuthorModalOpen={setIsAuthorModalOpen}
                setAuthor={setAuthor}
                setIsLabelModalOpen={setIsLabelModalOpen}
                submit={submit}
                setIsSetVideoModalOpen={setIsSetVideoModalOpen}
            >
            </ContentForm>
            <SelectAuthor
                isAuthorModalOpen={isAuthorModalOpen}
                setIsAuthorModalOpen={setIsAuthorModalOpen}
                author={author}
                setAuthor={setAuthor}
            >
            </SelectAuthor>
            <SelectLabel
            isLabelModalOpen={isLabelModalOpen}
            setIsLabelModalOpen={setIsLabelModalOpen}
            labels={labels}
            setLabels={setLabels}
            ></SelectLabel>
            <SetVideo
                isSetVideoModalOpen={isSetVideoModalOpen}
                setIsSetVideoModalOpen={setIsSetVideoModalOpen}
            ></SetVideo>
        </>
    );
}
export default observer(EditContent)